<!DOCTYPE html>
<script src="../../resources/js-test.js"></script>
<style>
.test {
    background: url(resources/dot.png) no-repeat -10px 50px,
        linear-gradient(to bottom, green 0%, lime 100%);
    width: 100px;
    height: 100px;
    visibility: hidden;
}
</style>
<div class="test"></div>
<script>
  description("Test that background position values do not leak between layers");
  var e = document.querySelector('.test');

  var bgPosLayers = getComputedStyle(e).backgroundPosition.split(', ');

  var bgPosLayer1 = bgPosLayers[0];
  shouldBeGreaterThanOrEqual('bgPosLayers[0].search("-10px")', '0');
  shouldBeGreaterThanOrEqual('bgPosLayers[0].search("50px")', '0');

  var bgPosLayer2 = bgPosLayers[1];
  shouldBe('bgPosLayers[1].search("-10px")', "-1");
  shouldBe('bgPosLayers[1].search("50px")', "-1");
</script>

